<template>
	<view style="height: 100%;">
		<swiperTabs>
			<template v-slot:tabs style="height: 100%;">
				<view style="height: 100%;">
					<u-tabs-swiper name="name" :barWidth="barWidth" active-color="#333333" inactive-color="#666666"
						bg-color="none" ref="tabs1" :list="parames.tabs" :current="current" @change="tabsChange"
						:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
					<swiper style="height: calc(100% - 44rpx);" :current="swiperCurrent" @transition="transition"
						@animationfinish="animationfinish" class="swiper">
						<slot name="swiperTbs'"></slot>
						<swiper-item :style="swiperItemStyle" class="swiper-item" v-for="(item, index) in parames.tabs"
							:key="index">
							<scroll-view scroll-y class="scroll" @scrolltolower="loadmore">
								<card @lookDetail="messageReadAndGetNum" :swiperCurrent="swiperCurrent"
									:list="parames.list" v-if="parames.list.length" />
								<view class="def" v-else>
									<view style="margin: 120rpx 0 80rpx 0;text-align: center;">
										{{swiperCurrent?'您目前没有参加的活动':'您目前没有申请添加朋友'}}
									</view>
									<view class="def-btn" style="margin-left: 57rpx;" @click="applyNow">即刻申请</view>
								</view>
								<u-loadmore bg-color="none" :status="parames.loadStatus" @loadmore="loadmore"
									v-if="parames.list.length"></u-loadmore>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>


			</template>
		</swiperTabs>
	</view>

	<tabbar :current="3" ref="tabbarRef" />
</template>

<script setup lang="ts">
	import tabbar from '@/components/tabbar.vue'
	import swiperTabs from '@/components/swiperTabs.vue'
	import card from './components/card.vue'
	import {
		reactive, ref, watch
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import user from '../../../api/user.js';
	let tabs1 = ref()
	let current = ref(0)
	let swiperCurrent = ref(0)
	let tabbarRef = ref(null)
	let parames = reactive({
		list: [],
		tabs: [
			{
				name: `新的朋友通知(0)`
			}, {
				name: `沙龙活动通知(0)`
			}
		],
		page: 1,
		loadStatus: ''
	})
	watch(() => swiperCurrent.value, (index) => {
		parames.list = []
		parames.page = 1
		messageList()
	})
	const loadmore = () => {
		if (parames.loadStatus == 'nomore') return
		messageList()
	}
	const applyNow = () => {
		if (swiperCurrent.value == 0) {
			uni.switchTab({
				url: '/pages/tabs/networking/index'
			})
		} else {
			uni.navigateTo({
				url: '/pages/common/salon/index'
			})
		}
	}
	// tabs通知swiper切换
	const tabsChange = (index : number) => {
		swiperCurrent.value = index;
	}
	// swiper-item左右移动，通知tabs的滑块跟随移动
	const transition = (e) => {
		let dx = e.detail.dx;
		tabs1.value.setDx(dx);
	}
	const animationfinish = (e) => {
		let current2 = Number(e.detail.current)
		tabs1.value.setFinishCurrent(current2);
		swiperCurrent.value = current2;
		current.value = current2;
	}
	const moreStatus = (status : string) => {
		parames.loadStatus = status
	}
	const messageList = async () => {
		const res = await user.messageList({
			type: swiperCurrent.value + 1,
			page: parames.page,
			size: 10
		})
		parames.list = [...parames.list, ...res.data]
		if (res.data.length < 10) return moreStatus('nomore')
		if (res.data.total <= 10) {
			parames.loadStatus = 'nomore'
		} else {
			moreStatus(res.data.length !== 0 ? 'loadmore' : 'nomore')
		}
		if (res.data.length === 0) return false
		parames.page += 1 // 当前页加1
	}
	const messageReadAndGetNum = async (i : any = '', flag = 0) => {
		let obj = {
			type: i,
			flag: flag
		}
		if (!obj.type) delete obj.type
		const res = await user.messageReadAndGetNum(obj)
		if (res.code !== 200) return
		uni.setStorageSync('msg', res.data)
		if(res.data.total>99) res.data.total = 99
		tabbarRef.value?.setBadge(3, res.data.total || 0)
		parames.tabs[0].name = `新的朋友通知(${res.data.friend_total || 0})`
		parames.tabs[1].name = `沙龙活动通知(${res.data.active_total || 0})`
	}
	onShow(() => {
		parames.list = []
		parames.page = 1
		// if(parames.list.length) return
		messageReadAndGetNum('', 1)
		messageList()

	})
</script>

<style lang="scss">
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.def {
		width: 654rpx;
		height: 393rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 3rpx rgba(225, 225, 225, 0.5);
		border: 2rpx solid #EEEFF0;
		position: absolute;
		top: 200rpx;
		left: 48rpx;

		.def-btn {
			text-align: center;
			width: 544rpx;
			height: 92rpx;
			background: #000000;
			line-height: 92rpx;
			color: #fff;
		}
	}
</style>